<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/index2.css">
	
</head>
<body>
	<form action="javascript:;" id="form">
	<div class="wrap">
		<div class="content">
			<p class="myReply" for="">我申请的职位：</p>
			<div class="reply-con">
				<label><input class="radio-btn" type="radio" name="reply" value="php"><span>php</span></label>
				<label><input class="radio-btn" type="radio" name="reply" value="前端"><span>前端</span></label>
				<label><input class="radio-btn" type="radio" name="reply" value="UI"><span>UI</span></label>
				<label><input class="radio-btn" type="radio" name="reply" value="人事"><span>人事</span></label>
				<label><input class="radio-btn" type="radio" name="reply" value="销售"><span>销售</span></label>
			</div>
			<br><br>
			<p class="myReply" for="">我掌握的技术：</p>
			<div class="reply-con">
				<label><input class="checkbox-btn" type="checkbox" name="get" value="php"><span>php</span></label>
				<label><input class="checkbox-btn" type="checkbox" name="get" value="javascript"><span>javascript</span></label>
				<label><input class="checkbox-btn" type="checkbox" name="get" value="css"><span>css</span></label>
				<label><input class="checkbox-btn" type="checkbox" name="get" value="html"><span>html</span></label>
				<label><input class="checkbox-btn" type="checkbox" name="get" value="nodejs"><span>nodejs</span></label>
			</div>
			<br><br>
			<button id="btn">点击提交</button>
		</div>
	</div>
	<div class="dialog" id="dv">
			<a href="#" id="off">x</a>
			<h4>localhost：8080显示：</h4>
			<p>我申请的职位是<span id="position"></span>,我掌握的技术是<span id="technology"></span></p>
			<button>确定</button>
	</div>
	</form>
	<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
	<script>
		window.onload=function(){
			document.getElementById('form').onsubmit=function(e){
				e.preventDefault();
				var form=document.getElementById('form');
				var elements=form.elements;
				var reply=elements['reply'];
				var gets=elements['get'];
				var get=[];
				for(i=0;i<gets.length;i++){
					if(gets[i].checked){
						get.push(gets[i].value)
					}
				}
				get=get.join(',');
				document.getElementById('dv').style.display = 'block';
				document.getElementById('position').innerText=reply.value;
				document.getElementById('technology').innerText=get;
			};
			document.getElementById('off').onclick=function(){
				document.getElementById('dv').style.display='none';
			};
		}
		//===========================================================
		// $(function(){
		// 	$('#btn').on('click',function(){
		// 		var radioValue=$('.radio-btn:checked').val();
		// 		var checkboxValue=[];
		// 		$('.checkbox-btn:checked').each(function(index,item){
		// 			checkboxValue.push($(item).val())
		// 		})
		// 		checkboxValue=checkboxValue.join(',');
				
		// 		$('.dialog').css('display','block')
		// 		$('#position').html(radioValue);
		// 		$('#technology').html(checkboxValue);
		// 	});
		// 	$('#off').on('click',function(){
		// 		$('.dialog').css('display','none');
		// 	})
		// })
	</script>
</body>
</html>